//index.js
<template>
  <!-- <Spin :spinning="mapLoading"> -->
    <div id="main" class="map" ref="mapDom"> </div>
  <!-- </Spin> -->
</template>


​<script setup lang="ts">
  // import axios from 'axios';
  import echartMap from './echartMap';
  import * as echarts from 'echarts';
  import china from './china.json';

  // 获取dom
  const mapDom: any = ref(null);
  // 获取地图的数据
  let mapData: any = ref([]);
  //处理数据的方法函数
  let mapRender = echartMap();

  defineExpose({ getCityNum });
  let mapLoading = ref<boolean>(true);

  onMounted(() => {
    // 初始化画布
    echarts.registerMap('china', china);
  });

  let data = {};
  async function getCityNum() {
    const res = await getResourceByDistrict();

    for (var i in res) {
      let item = {
        cata_sum: res[i].cata_sum,
        file_folder_sum: res[i].file_folder_sum,
        file_sum: res[i].file_sum,
        table_sum: res[i].table_sum,
        data_quality: res[i].data_quality,
      };
      var value =
        Number(res[i].cata_sum) +
        Number(res[i].file_folder_sum) +
        Number(res[i].file_sum) +
        Number(res[i].table_sum);
      res[i].data = item;
      res[i].value = value;
      res[i].label = {
        normal: {
          show: true,
          formatter: function (params) {
            return params.name + '\n' + params.value;
          },
        },
        textStyle: {
          fontWeight: 'normal',
          fontSize: 50,
          textBorderColor: '#fff',
          color: '#f00',
        },
      };
    }
    data = mapRender(china.features);
    data.series[0].data = res;
    const maxValue = Math.max.apply(
      Math,
      res.map((item) => {
        return item.value;
      }),
    );
    data.visualMap.max = maxValue;
    var map = echarts.init(mapDom.value);
    map.setOption(data);
    console.log('地图加载完毕')
    mapLoading.value = false;
  }
</script>
<style>
  .map {
    height: calc(100% - 55px);
    margin: auto;
  }
</style>
